<template>
    <div class="share-icon" >
        <span @click="isShowSelectUser = true" :style="{'font-size': size + 'px'}">
            <slot>
                <van-icon name="share-o" :size="size" :color="color"/>
                <span :style="{'font-size': size + 'px'}">{{ $t(text) }}</span>
            </slot>
        </span>
        <new-select-user :is-show.sync="isShowSelectUser" @changeIdList="selectUserHandle"></new-select-user>
    </div>
</template>

<script>
import { Icon, Toast } from 'vant';
import SelectGroupUser from './SelectGroupUser';
import NewSelectUser from './NewSelectUser';
export default {
    name: 'ShareCommon',
    components: {
        NewSelectUser,
        vanIcon: Icon,
        vanToast: Toast
    },
    props: {
        size: { // 分享图标大小
            type: [Number, String],
            default: 14
        },
        text: { // 分享图标文字
            type: String,
            default: 'circle_kg_64'
        },
        content: { // 分享内容
            type: String,
            default: ''
        },
        subject: { // 分享内容
            type: String,
            default: ''
        },
        mtpId: { // 被分享数据的ID
            type: [Number, String],
            default: -1
        },
        code: { // 被分享数据的类型
            type: String,
            default: 'KNOWLEDGE'
        },
        color: { // 图标颜色
            type: String,
            default: '#999999'
        }
    },
    data() {
        return {
            isShowSelectUser: false
        };
    },
    methods: {
        selectUserHandle(userList) {
            if (userList.length > 0 && this.content.length > 0) {
                let data = {
                    content: this.content,
                    subject: this.subject && this.subject.length > 0 ? this.subject : this.content,
                    recEntIds: userList,
                    mtpId: this.mtpId,
                    code: this.code
                };
                this.$axios.post('/app/api/share/save', data).then(res => {
                    Toast({message: this.$t('circle_kg_72'), forbidClick: true});
                });
            }
        }
    }
};
</script>

<style scoped lang="less">
    .share-icon {
        display: inline-block;
        &>span {
            display: flex;
            align-items: center;
        }
    }
</style>
